<template>
  <div>
    <h3>用户管理</h3>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in userList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
          <td><a href="javascript:;" @click="goDetail(item.id)">详情</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { getUsers } from '@/request/Request.js'

export default {
  data () {
    return {
      userList: []
    }
  },

  methods: {
    goDetail (id) {
      // console.log(id);
      this.$router.push('/userinfo/' + id)
    },
    async getUsers () {
      const data = await getUsers('/users')
      // console.log(data)
      this.userList = data
      // this.$axios.get('http://localhost:3000/users').then((res) => {
      //   console.log(res.data)
      //   this.userList = res.data
      // })
    }
  },
  mounted () {
    this.getUsers()
  }
}
</script>
